<template>
  <div v-loading="pageLoading" class="home_league">
    <header class="game_modal_header">参赛选手</header>
    <div class="schedule_content modal_shadow">
      <el-row class="subtotal gl_pb_15">
        <el-col :span="18" style="padding-top:7px">
          <span v-show="statistics.athleteCount" class="gl_mr_20">参赛人数：{{ statistics.athleteCount }}</span>
          <span v-show="statistics.athleteCategoryCount">参赛人次：{{ statistics.athleteCategoryCount }}</span>
        </el-col>
        <el-col :span="6" align="right">
          <el-input v-model.trim="playerName" size="small" placeholder="请输入参赛选手姓名" prefix-icon="el-icon-search" @change="getPageList()" />
        </el-col>
      </el-row>

      <div class="gl_pb_15">
        <el-table v-loading="tableLoading" :data="tableData" stripe size="small" style="width: 100%">
          <el-table-column prop="name" label="选手姓名" align="left">
            <template slot-scope="scope">
              <div class="agency_wrap gl_clear">
                <div class="agency_photo gl_mr_10">
                  <img class="player_photo" :src="getStaticFileUrl(scope.row.imagePath)" @error="errorPhoto">
                </div>
                <span>{{ scope.row.athleteName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="delegationName" label="所属机构" />
        </el-table>
      </div>

      <!-- 分页 -->
      <el-row style="text-align: center;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="qo.MaxResultCount"
          :current-page="qo.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionRequestCompetitionLeagueAthleteListLeagueCompetitionId, // 联赛下参赛选手-（联赛首页）
  api_GET_EventsManagementCompetitionRequestCompetitionLeagueIndexDataLeagueCompetitionId // 联赛下数据管理-联赛数据统计(联赛首页)
} from '@/extend/api/gameswaggerApi/app';

import defaultPhoto from '@/assets/images/face_default.png';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    statistics: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      defaultPhoto: defaultPhoto, // 默认照片
      playerName: '',
      pageLoading: false,
      tableLoading: false,
      tableData: [],
      total: 0,
      qo: {
        SkipCount: 0,
        Page: 1,
        MaxResultCount: 10
      }
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
          // this.getPlayerStatistics(this.gameInfo.id);
        }
      }
    }
  },
  methods: {
    // 获取页面数据
    getPageList (page) {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      _qo.Page = page || 1;
      _qo.SkipCount = (_qo.Page - 1) * _qo.MaxResultCount;
      _qo.Name = this.playerName;
      this.apiAthleteList(_qo);
    },
    // 联赛下参赛选手-（联赛首页）
    apiAthleteList(qo) {
      this.tableLoading = true;
      api_GET_EventsManagementCompetitionRequestCompetitionLeagueAthleteListLeagueCompetitionId(this.gameInfo.id, qo)
        .then(
          res => {
            this.tableLoading = false;
            this.total = res.totalCount;
            this.tableData = res.items;
            console.log(res);
          }
        )
        .catch(
          error => {
            this.tableLoading = false;
            console.log(error);
          }
        );
    },
    // 获取运动员统计
    getPlayerStatistics(id) {
      api_GET_EventsManagementCompetitionRequestCompetitionLeagueIndexDataLeagueCompetitionId(id)
        .then(
          res => {
            this.statistics = res;
            console.log(res);
          }
        );
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>
  .player_photo {
    object-fit: cover;
  }
</style>
